import React from "react";
import { observer } from "mobx-react";
import { useStore } from "../stores";
import InfiniteScroll from "react-infinite-scroller";
import { List } from "antd";
import styled from "styled-components";

const Img = styled.img`
  width: 100px;
  height: 120px;
  object-fit: contain;
  border: 1px solid #eee;
`;

const Component = observer(() => {
  const { HistoryStore } = useStore();

  const loadMore = () => {
    HistoryStore.find();
  };

  return (
    <div>
      <InfiniteScroll
        initialLoad={true}
        pageStart={0}
        loadMore={loadMore}
        useWindow={true}
        hasMore={!HistoryStore.isLoading && HistoryStore.hasMore}
      >
        <List
          dataSource={HistoryStore.list}
          renderItem={(item) => (
            <List.Item keys={item.id}>
              <div>
                <Img src={item.attributes.url.attributes.url} />
              </div>
              <div>
                <h5>{item.attributes.filename}</h5>
              </div>
              <div>
                <a target="_blank" href={item.attributes.url.attributes.url}>
                  {item.attributes.url.attributes.url}
                </a>
              </div>
            </List.Item>
          )}
        ></List>
      </InfiniteScroll>
    </div>
  );
});

export default Component;
